<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.min.js"></script>
</head>

<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById("main"));
        myChart.setOption({
            title: {
                text: 'iphone 价格走向',
                link: '',
                textStyle: {
                    color: '#ccc',
                    fontSize: 20,
                    fontWeight: 'bold'
                },
                subtext: '饼图',
                left: 50,
                top: 0
            },
            tooltip: {
                show: true
            },
            legend: {
                data: ['售价', '成本']
            },
            xAxis: {
                data: ["", "", "", "", ""]
            },
            yAxis: {
                data: ["", "", "", "", ""]
            },
            series: [
                {
                    name: '售价',
                    type: 'pie',    // 设置图表类型为饼图
                    radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                    data: [          // 数据数组，name 为数据项名称，value 为数据项值
                        { value: 5000, name: 'iphone4' },
                        { value: 6000, name: 'iphone5' },
                        { value: 7000, name: 'iphone6' },
                        { value: 9000, name: 'iphone7' },
                        { value: 11000, name: 'iphoneX' }
                    ]
                },
            ]
        });
    </script>
</body>

</html>